;
export default function () {
    var nav_ul_list = Array.from($(".nav_ul").children());
    var show_list = Array.from($(".show"));
    var main_width = $(".nav_main").width();
    var nav_ul_li_list = Array.from($(".nav_ul li"));
    // console.log(nav_ul_list);
    // console.log(show_list);
    $(".nav_ul").on("mouseenter", "li", function () {
        // console.log(this);
        $(this).attr("style", "background: rgb(245, 245, 245); color: rgb(0, 0, 0);")
            .siblings().attr("style", "background: rgba(0, 0, 0, 0); color: rgb(255, 255, 255);");
        $($(this).children()[0]).attr("style", "color:inherit;");
        $($(this).children()[1]).addClass("ibackground");

        var index = nav_ul_list.indexOf(this);
        // console.log(index);
        var show_div = show_list[index];
        if (index === 8) return false;
        showMore(show_div);
    });
    $(".nav_ul").on("mouseleave", "li", function () {
        // 改变当前的样式 背景  字体颜色
        $(this).attr("style", "background: rgba(0, 0, 0, 0); color: rgb(255, 255, 255);");
        // 建议写法
        // $(this).css({
        //     "background": "rgba(0, 0, 0, 0);",
        //     "color": "rgb(255, 255, 255);"
        // });

        // 找到当元素的孩子 移除他的样式  
        $($(this).children()[1]).removeClass("ibackground");
        var index = nav_ul_list.indexOf(this);
        console.log(index);
        var show_div = show_list[index];
        if (index === 8) {
            show_div.html("");
            return false;
        }
        // console.log(show_div);
        hideMore(show_div);
        $(show_div).on("mouseenter", function () {
            showMore(show_div);
            $(nav_ul_li_list[index]).attr("style", "background: rgb(245, 245, 245); color: rgb(0, 0, 0);")
                .siblings().attr("style", "background: rgba(0, 0, 0, 0); color: rgb(255, 255, 255);");
            $($(nav_ul_li_list[index]).children()[0]).attr("style", "color:inherit;");
            $($(nav_ul_li_list[index]).children()[1]).addClass("ibackground");
        });

        $(show_div).on("mouseleave", function () {
            hideMore(show_div);
            $(nav_ul_li_list[index]).attr("style", "background: rgba(0, 0, 0, 0); color: rgb(255, 255, 255);");
            $($(nav_ul_li_list[index]).children()[1]).removeClass("ibackground");
        });
    });

    function showMore(ele) {
        $(".nav_main").width(main_width + $(($($(ele).children()[0])).children()[0]).width());
        $($(ele).children()[0]).removeClass("none");
        $($(ele).children()[0]).attr("style", "height: 430px; width: 447px; left: 0; display: block;");
        // console.log($($(ele).children()[0]).width());
        $(ele).width($($(ele).children()[0]).width());
    }

    function hideMore(ele) {
        $(".nav_main").width(main_width);
        var show_div_width = $($(ele).children()[0]).width();
        $($(ele).children()[0]).attr("style", "height: 430px; width: 447px; left: " + show_div_width + "px; display: block;");
        $($(ele).children()[0]).addClass("none");
        $(ele).width(0);
    }
}